<template>
	<div class="details">
		<form action="post" method="">
			<div class="xiangqing">
				<div class="neirong w">
					<div class="xiaomi6 fl">友享校园</div>
					<nav class="fr">
						<li><a href="">概述</a></li>
						<li>|</li>
						<li><a href="">变焦双摄</a></li>
						<li>|</li>
						<li><a href="">设计</a></li>
						<li>|</li>
						<li><a href="">参数</a></li>
						<li>|</li>
						<li><a href="">F码通道</a></li>
						<li>|</li>
						<li><a href="">用户评价</a></li>
						<div class="clear"></div>
					</nav>
					<div class="clear"></div>
				</div>
			</div>

			<div class="jieshao mt20 w">

				<div  class="left fl picture" v-for="time in displacritical">
          <img :src="time.classCPIc" class="classcpic">
        </div>
				<div class="right fr">
					<div class="h3 ml20 mt20" v-html="displacritical[0].classCName"></div>
					<div class="jianjie mr40 ml20 mt10" v-html="displacritical[0].classCTitle"></div>
					<div class="jiage ml20 mt10"> ￥{{displacritical[0].classCprice}}元</div>
					<div class="ft20 ml20 mt20">选择租凭时间

            <template>
              <div class="block">
                <div class="demonstration">值：{{ value10 }}</div>
                <el-date-picker
                  v-model="value10"
                  @change="getTime"
                  type="datetime"
                  placeholder="选择日期"
                  format="yyyy - MM - dd HH:mm:ss"
                  :picker-options="pickerOptions0">
                </el-date-picker>
              </div>
            </template>
          </div>


					<div class="xzbb ml20 mt10">
						<div class="clear"></div>
					</div>

					<div class="xiadan ml20 mt20">
						<input class="jrgwc" type="button" :classCprice="displacritical[0].classCprice"  @click="addntshoping(displacritical[0].classCprice)" value="立即租凭" />


					</div>
          <div class="pinglun"> <span  style="margin: 20px">商品评论</span></div>
          <div class="userinpunl">
          	<ul>

              <li v-for="time in CommodityReviews">
                <div class="pinglunusering">
                  <div class="suerimg">
                    <img :src="time.userImg"><span>{{time.Nickname}}</span>
                  </div>
                  <div class="zhicifansui">
                    <span>支持</span><span>反对</span><span>沙发：{{time.commentNum}}</span>
                  </div>
                </div>
                <div class="inpncontent">

                  <img :src="time.commentPic" v-if="time.commentPic.length>5">
                  <span>{{time.commentContent}}</span>
                </div>
              </li>
            </ul>

          </div>
        <div>


        </div>
				</div>
				<div class="picture">
					<div class="Recommend fl"> <span>推荐商品</span></div>
					<ul>
            <!--:classCIds="itme.classCId" :classBId="itme.classBId" @click="CommodityDetails((itme.classCId),(itme.classBId))"-->
						<li class="tuijianpic" v-for="time in Recommendlist" >
							<div class="Recommendsimg">
								<div>
									<img :src="time.classCPIc">
								</div>
								<div class="font-sziatitle">{{time.classCName.substr(0,8)}}</div>
							</div>
						</li>

					</ul>
				</div>
			</div>
		</form>
	</div>
</template>
<script>
	export default {
		name: 'details',
		data() {
			return {
        value10: '',
        value11: '',
        value12: '',
        pickerOptions0: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          }
        },
        displacritical:[
          {
            classAId:"",classAName:"",classBId:"",classCName:"",classCPIc:"",classCTitle:"", 	classCprice:""
          }
        ],
        CommodityReviews:[],
        RecommendationTwo:[],

        Recommendlist:[]
			}
		}, mounted(){       //页面加载的时间
      //加载商品详情
      var  classCId=window.sessionStorage.getItem('classCId');
      var  classBId=window.sessionStorage.getItem('classBId');
      this.axios.post('/api/HomePageInterface/CommodityDetails', this.qs.stringify({
        classCId:classCId
      }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
        .then(function(res) {
          if (res.data.status == "200") {
            for(let i=0;i<res.data.msg.length;i++)
            {
              res.data.msg[i].classCPIc="/api/img/"+ res.data.msg[0].classCPIc;
              res.data.msg[i].classCTitle=res.data.msg[i].classCTitle;
            }
            this.displacritical = res.data.msg;
          }else if(res.data.status == "300"){
              alert("没有数据");
          }else if(res.data.status == "400")
          {
            alert("程序错误");
          }
        }.bind(this))


  //加载商品的评论
      this.axios.post('/api/HomePageInterface/CommodityReviews', this.qs.stringify({
        classCId:classCId
      }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
        .then(function(res) {
          if (res.data.status == "200") {
            for(let i=0;i<res.data.msg.length;i++)
            {
              res.data.msg[i].commentPic="/api/img/"+ res.data.msg[i].commentPic;
              //处理用户评论头像
              res.data.msg[i].userImg="/api/img/"+ res.data.msg[i].userImg;
            }
            this.CommodityReviews = res.data.msg;
          }else if(res.data.status == "300"){
            // alert("没有数据");
          }else if(res.data.status == "400")
          {
            alert("程序错误");
          }
        }.bind(this))
        .catch(function(err) {
          if (err.response) {
            console.log(err.response)
            //控制台打印错误返回的内容
          }
        }.bind(this));

      //加载推荐商品
      this.axios.post('/api/HomePageInterface/RecommendationTwo', this.qs.stringify({
        classBId:classBId
      }), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
        .then(function(res) {
          if (res.data.status == "200"){
            //alert("没有"+this.Recommendlist.length)
            for(let i=0;i<res.data.msg.length;i++)
            {
              res.data.msg[i].classCPIc="/api/img/"+ res.data.msg[i].classCPIc;
            }


           // this.Recommendlist
            for(var i=0 ;i<res.data.msg.length;i++)
            {
              if(this.Recommendlist.indexOf(res.data.msg[i])==-1)
              {
                 this.Recommendlist.push(res.data.msg[i]);
              }
            }
            //alert("有"+this.Recommendlist.length)
            return this.Recommendlist;

            this.RecommendationTwo = res.data.msg;





          }else if(res.data.status == "300"){
            alert("没有数据");
          }else if(res.data.status == "400")
          {
            alert("程序错误");
          }
        }.bind(this))
        .catch(function(err) {
          if (err.response) {
            console.log(err.response)
            //控制台打印错误返回的内容
          }
        }.bind(this));




    },methods: {//事件
      addntshoping(classCprice) {//立即租凭
        var time=new Date();
        var year=time.getFullYear();
        var month=(time.getMonth()+1);
        var dates=time.getDate();
        var h=time.getHours();
        var m=time.getMinutes();
        var s=time.getSeconds();
        month=month<10?"0"+month:month;
        dates=dates<10?"0"+dates:dates;
        h=h<10?"0"+h:h;
        m=m<10?"0"+m:m;
        s=s<10?"0"+s:s;
        var timeStr=year+ "/" +month+"/"+dates+" "+h+":"+m+":"+s;
        //当前用户没有选择时间
        if(this.value10.toLocaleString().replace(/[上午]/g,'').replace(/[下午]/g,'')==""||this.value10.toLocaleString().replace(/[上午]/g,'').replace(/[下午]/g,'')==null)
        {
          alert("请选择租凭时间");
          return false;
        }

       var date1= this.value10.toLocaleString().replace(/[上午]/g,'').replace(/[下午]/g,'');  //结束时间
        var date2 = new Date();    //开始时间
        var date3 = new Date(date1).getTime()- date2.getTime();   //时间差的毫秒数
        //计算出相差天数
        var days=Math.floor(date3/(24*3600*1000))

        //计算出小时数

        var leave1=date3%(24*3600*1000)    //计算天数后剩余的毫秒数
        var hours=Math.floor(leave1/(3600*1000))
        //计算相差分钟数
        var leave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数
        var minutes=Math.floor(leave2/(60*1000))
        //计算相差秒数
        var leave3=leave2%(60*1000)      //计算分钟数后剩余的毫秒数
        var seconds=Math.round(leave3/1000)
        alert(" 相差 "+days+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒")

      //2
        //alert(hours*2);//小时
       // alert(days*24*2);//天
      //当前小于等于30折半
        if(minutes<=30)
        {
         // alert(2/1)
        }
      alert("价格"+classCprice);


      },

        getTime(date){//格式化时间
        this.time = date;
        console.log(this.time);
        alert("我的时间"+this.time.toLocaleString().replace(/[上午]/g,''),repeat(/[下午]/g,''));
      },


      CommodityDetails(classCId,classBId){
         alert(classBId);
          alert(classCId);
        window.sessionStorage.setItem('classCId',classCId);
        window.sessionStorage.setItem('classBId',classBId);
        // this.axios.post('/api/HomePageInterface/CommodityDetails', this.qs.stringify({
        //   commentId:classCId,
        // }), {
        //   headers: {
        //     'Content-Type': 'application/x-www-form-urlencoded'
        //   }
        // })
        //   .then(function(res) {
        //     if (res.data.status == "200") {
        //       //alert(res.data.status);
        //       // for(let i=0;i<res.data.msg.length;i++)
        //       // {
        //       //   res.data.msg[i].classCPIc="/api/img/"+ res.data.msg[i].classCPIc;
        //       //   res.data.msg[i].classCTitle=res.data.msg[i].classCTitle;
        //       // }
        //       // this.clothingFlashback = res.data.msg;
        //     }
        //     //控制台打印请求成功时返回的数据
        //     //bind(this)可以不用
        //   }.bind(this))
        //   .catch(function(err) {
        //     if (err.response) {
        //       console.log(err.response)
        //       //控制台打印错误返回的内容
        //     }
        //   }.bind(this));
      }

    },
    created: function() {
      this.$emit('public_footer', false);

    }
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.inpncontent{
	padding: 2%;
	background: #F7F7F7;
}
.inpncontent img{
margin-left: 0px;
width: 80px;
height: 80px;
}
.zhicifansui
{
	margin-left: 400px;
}
.pinglunusering span
{
	 line-height: 50px;
	 margin-right: 20px;
}
.pinglunusering span:hover
{
	cursor: pointer;
}
.suerimg span
{
	 line-height: 50px;
	 float: left;
}

.suerimg img
{
	width: 50px;
	height: 50px;
	border-radius:50% ;
	display: block;
	float: left;
}
.pinglunusering
{
	margin-top: 20px;
	width: 96%;
	padding: 2%;
    height: 30px;
    background: #F8F8F8;

}



.userinpunl
{
	width: 96%;
    height: auto;
    background: #F3F3F3;
    border:1px solid gainsboro;
    padding: 2%;
}
	.details {
		background: white;
		width: 100%;
		margin: 0px auto;
		text-align: left;
	}

	.picture {
		width: 450px;
		height: 500px;
		float: left;
	}

	.picture img {
		width: 450px;
		height: 500px;
	}

	.Recommend {
		width: 440px;
		height: 500px;
		margin: 5% 0%;
		width: 100%;
		height: 10%;
		background: silver;
	}

	.picture span {
		line-height: 58px;
		font-size: 22px;
		font-weight: bold;
	}
	.tuijianpic:hover{
    cursor: pointer;
  }

	.tuijianpic {
		padding: 10px;
		float: left;
	}

	.Recommendsimg {
		padding: 0;
		margin: 0;
		float: left;
		width: 100%;
		border: 1px solid gainsboro;
	}

	.Recommendsimg img {
		width: 200px;
		height: 210px;
	}

	.font-sziatitle {
		width: auto;
		background: silver;
		font-size: 20px;
		text-align: center;
		button: 0px;
	}
  .pinglun
  {
    width: 100%;
    height: 50px;
    background:#FF6700;
    font-size: 22px;
    margin-top: 20%;
    color: white;
    position: relative;
  }
  .pinglun span
  {margin: 0;
    padding: 0;
   position: absolute;
  }
</style>
